<template>
  <div class="main">
    <Header />
    <a-carousel autoplay :autoplaySpeed="2000">
      <div class="big-box" v-for="item in 9" :key="item">
        <img class="img" :src="`${vue_app_img_api}/banner${item}.png`" alt="" />
        <div class="tigs" :class="[2, 4, 5, 6, 8].includes(item) ? 'tigs-leftTop' : 'tigs-rightbottom'" v-if="item < 6">
          <div class="title" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">打造一流的</div>
          <div class="title" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">
            高坝工程<span class="red-text">数字孪生平台</span>
          </div>
          <div class="text" style="margin-top: 36px" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">
            Building a first-class digital twin platform
          </div>
          <div class="text" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">for high dam engineering</div>
        </div>
        <div class="tigs" :class="[2, 4, 5, 6, 8].includes(item) ? 'tigs-leftTop' : 'tigs-rightbottom'" v-else>
          <div class="title" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">
            数据驱动 <span class="red-text">理念创新</span>
          </div>
          <div class="title" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">
            <span class="red-text">方法革新</span> 示范应用
          </div>
          <div class="text" style="margin-top: 36px" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">
            Data driven Concept Innovation
          </div>
          <div class="text" :class="[2, 4, 5, 6, 8].includes(item) ? '' : 'text-right'">
            Method innovation Demonstration application
          </div>
        </div>
      </div>
      <!-- <div class="big-box">
        <video
          ref="videos"
          class="tsgz-video"
          :controls="false"
          src="https://dztest2.obs.cn-southwest-2.myhuaweicloud.com/hydrobim/headvideo/banner1.mp4"
          autoplay
          type="video/mp4"
          muted
          loop
        ></video>
        <div class="tigs">
          <div class="title">通过GIS手段开展</div>
          <div class="title">更精确的<span class="red-text">城市规划分析</span></div>
          <div class="text">Conducting more accurate urban planning analysis</div>
          <div class="text">through GIS</div>
        </div>
      </div> -->
    </a-carousel>
    <div class="footer">
      <div class="left">
        <div class="item">
          <img src="@/assets/home/tel.png" />
          +86-188-1133-7313
        </div>
        <div class="item">
          <img src="@/assets/home/emil.png" />
          liuguangyusdu@outlook.com
        </div>
        <div class="item">
          <img src="@/assets/home/book.png" />
          北京市西城区六铺炕北小街二号
        </div>
      </div>
      <div class="right">
        <img src="@/assets/home/verson.png" />

        <div>版权所有@中国电力建设集团</div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/layouts/components/header';

export default {
  name: 'index',
  components: { Header },
  data() {
    return {
      vue_app_img_api: process.env.VUE_APP_IMG_API
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: calc(100vh - 112px);
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.main ::v-deep .slick-slide > :first-child {
  height: 100%;
}
.footer {
  height: 44px;
  background: #000c14;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    .item {
      display: flex;
      align-items: center;
      font-size: 16px;
      padding: 0 32px;
      border-right: 1px solid #fff;
      img {
        height: 16px;
        margin-right: 10px;
      }
    }
    .item:last-child {
      border: none;
    }
  }
  .right {
    display: flex;
    align-items: center;
    padding-right: 24px;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
}
.tsgz-video {
  width: 90%;
}

.big-box {
  position: relative;
  background-color: #000;
  height: 100%;
  .tigs {
    position: absolute;
    z-index: 10;
    .title {
      font-size: 70px;
      font-weight: 700;
      color: #fff;
      text-align: left;
      line-height: 105.59px;
    }

    .text {
      font-size: 30px;
      color: rgba(255, 255, 255, 0.8);
      text-align: left;
      line-height: 39.59px;
    }
    .red-text {
      color: red;
    }

    .text-right {
      text-align: right;
    }
  }
  .tigs-leftTop {
    top: 140px;
    left: 160px;
  }
  .tigs-rightbottom {
    bottom: 150px;
    right: 160px;
    text-align: right;
  }
  .img {
    width: 100%;
    height: 100%;
  }
}
</style>
